<template>

    <div>

        <h2>领取油卡</h2>

        <div class="container">
            <div>
                <el-form :inline="true" :model="params" class="demo-form-inline">
                    <el-form-item label="订单状态">
                        <el-select v-model="params.order_status" placeholder="订单状态" style="width:100px;">
                            <el-option label="待发货" value="1" aria-selected="true"></el-option>
                            <el-option label="待收货" value="2"></el-option>
                            <el-option  label="已收货" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-date-picker
                            v-model="params.value1"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                    </el-date-picker>
                    <el-form-item>
                        <el-button type="primary" @click="reload" >查询</el-button>
                    </el-form-item>
                    <el-button type="primary" @click="exports" >导出</el-button>
                </el-form>

            </div>
            <el-table
                    :data="items"
                    style="width: 100%"
                    v-loading="loading">
                <el-table-column
                        prop="id"
                        label="订单ID"
                >
                </el-table-column>
                <el-table-column
                        prop="detail.goods_name"
                        label="油卡号"
                >
                </el-table-column>
                <el-table-column
                        prop="order_amount"
                        label="订单金额"
                        >
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="收件人"
                        >
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="收件人电话"
                        >
                </el-table-column>

                <el-table-column
                        prop="order_status_name"
                        label="状态"
                >
                </el-table-column>

                <el-table-column
                        prop="order_time"
                        label="下单时间"
                >
                </el-table-column>
                <el-table-column
                        label="操作"
                >
                    <template slot-scope="scope">
                        <el-button @click="showDetail(scope.row)" size="mini">订单详情</el-button>
                        <el-button v-if="scope.row.order_status==1" @click="fillShipping(scope.row)" size="mini">回填物流单号</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    ref="mainPage"
                    background
                    class="pagination"
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="params.limit"
                    @current-change="setPage"
                    @prev-click="setPage"
                    @next-click="setPage"
            >
            </el-pagination>

        </div>
        <el-dialog title="订单详情" v-if="orderDetail" :visible.sync="dialogDetailVisible">
            <el-row>
              <el-col :span="12">
                  <div class="grid-content bg-purple">
                    订单号:{{orderDetail.order_sn}}
                  </div>
              </el-col>
              <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                  订单时间:{{orderDetail.order_time}}
                  </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                  <div class="grid-content bg-purple">
                    收件人:{{orderDetail.username}}
                  </div>
              </el-col>
              <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                  收件人电话:{{orderDetail.phone}}
                  </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                  <div class="grid-content bg-purple">
                    收件地址:{{orderDetail.address}}
                  </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                  <div class="grid-content bg-purple">
                    油卡号:{{orderDetail.detail.goods_name}}
                  </div>
              </el-col>
            </el-row>
            <el-row v-if="orderDetail.order_status>=2">
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        物流公司:{{orderDetail.shipping_company}}
                    </div>
                </el-col>
            </el-row>
            <el-row v-if="orderDetail.order_status>=2">
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        物流单号:{{orderDetail.shipping_code}}
                    </div>
                </el-col>
            </el-row>
        </el-dialog>

        <el-dialog
                title="物流信息"
                :visible.sync="dialogVisible"
                width="50%"
                :close-on-click-modal="false"
        >
            <el-form ref="form" :model="form" label-width="160px">
                <el-form-item label="物流公司" >
                    <el-select v-model="form.shipping_company" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="物流单号">
                    <el-input v-model="form.shipping_code"></el-input>
                </el-form-item>
            </el-form>

            <div style="text-align: center">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>
<script>
    export default {
      data() {
        return {
          items: [],
          loading: true,
          dialogDetailVisible:false,
          dialogVisible:false,
          form:[],
          orderDetail:{
          detail:{}
          },
          params: {
            limit: 10,
            offset: 0,
            order_status:1,
            value1:''
          },
          currentPage: 1,
          total: 0,
            options: [],
            value: ''
        }
      },
      created() {
        this.fetch();
      },
      methods: {
        fetch() {
          axios.get('/admin/api/card/order/search', {params: this.params}).then((res) => {
            if (res.data.code === 0) {
              this.items = res.data.data.items;
              this.total = res.data.data.total;
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch(function() {
            this.$message('系统错误');
            this.loading = false;
          })
        },

        disable() {

        },

        enable() {

        },

        // 切换分页
        setPage: function(page) {
          this.currentPage = page;
          this.params.offset = (page - 1) * this.params.limit;
          this.fetch()
        },
        // 重新请求接口获取数据，参数发生了变化，页码重置为1
        reload: function() {
          if (this.currentPage === 1) {
            this.fetch();
          } else {
            this.setPage(1);
          }
        },
        showDetail(order) {
            this.dialogDetailVisible=true;
            this.orderDetail = order;
        },
        fillShipping:function(order){
            this.dialogVisible = true;
            this.form = order;
            this.wuliu();
        },
        save() {
            this.update();
        },

      update() {
          axios.put('/admin/api/card/order/update/' + this.form.id, this.form).then((res) => {
              if (res.data.code === 0) {
                  this.dialogVisible = false;
                  this.fetch();
              } else {
                  this.$message(res.data.msg);
              }
              this.loading = false;
          }).catch((err) => {
              this.$message('系统错误');
              this.loading = false;
          })
      },
      exports(){
          window.location.href='/admin/api/card/export?value='+this.params.value1+'&status='+this.params.order_status;
      },
          wuliu(){
              axios.put('/admin/api/wuliu').then((res) => {
                  if (res.data.code===0){
                      this.options = res.data.data;
                  }else{
                      this.$message(res.data.msg)
                  }
              }).catch((err)=>{
                  this.$message('系统错误');
                  this.loading = false;
              })
          }

      }
    }
</script>